<template>
  <div>
    <JInput placeholder="点击选择送货员" readonly @click="focusOn" v-model="deliverNames" :size="size" style="width: 170px;" />
    <!--    显示选择 送货员-->
    <tiny-dialog-box close-on-press-escape destroy-on-close v-model:visible="state.deliverModal" title="选择送货员" width="900" :position="{top: 100}">
      <span class="area-item" :class="{active:deliverNames.indexOf(admin.name) !== -1}"  v-for="(admin, index) in state.drivers" :key="index" @click="choseDeliver(admin)">{{admin.name}}</span>
      <div style="margin-top: 20px;text-align: center;padding: 10px 0 ;" >
        <JButton  @click="confirmDeliver" type="info" style="width: 150px;" size="large">确定</JButton >
      </div>
    </tiny-dialog-box>
  </div>
</template>
<script setup>

import tool from "@/utils/tool";
import {ref} from "vue";
const props = defineProps({
  modelValue: { type: [Number, String], default: '' },
  size: { type: [Number, String], default: 'large' },
})
const state = ref({
  deliverModal: false,
  drivers: []
})
const deliverNames = defineModel()
const focusOn = () => {
  tool.post('justdeliver/shy', {which: 'list'}).then(ret => {
    state.value.drivers = ret.data
    state.value.deliverModal = true
  })
}
// 选择送货员
const choseDeliver = (admin) => {
  let delis = []
  if(deliverNames.value) {
    delis = deliverNames.value.split(',')
  }
  if(deliverNames.value.indexOf(admin.name) !== -1) {
    for (let i = 0; i < delis.length; i++) {
      if(delis[i] === admin.name) {
        delis.splice(i, 1)
      }
    }
  }
  else {
    delis.push(admin.name)
  }
  let str = ''
  for (let i = 0; i < delis.length; i++) {
    if(i === 0) {
      str = delis[i]
    }
    else {
      str = str + ',' + delis[i]
    }
  }
  deliverNames.value = str

}
// 确认送货员
const confirmDeliver = () => {
  state.value.deliverModal = false
}


</script>
<style scoped lang="scss">
.area-item {
  display: inline-block;
  border: 1px solid gainsboro;
  background-color: #f8f8f9;
  margin: 5px;
  width: 130px;
  padding: 15px 0;
  text-align: center;
  border-radius: 2px;
  font-weight: bold;
  cursor: pointer;
  color: #515a6e;
  white-space: nowrap;
  overflow: hidden;
}
.area-item.active {
  border: 1px solid #5cadff;
  background-color: #5cadff;
  color: white;
}
</style>